<script setup>
import { onMounted, reactive, ref } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import categoryApi from '@/api/goods/CategoryApi'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false, //
  loading: false, // 加载开关
  childrenDrawer: false, // 选择图标开关
  parentOptions: []
})
// 表单结构
const original = {
  id: null,
  parentId: 0, // 父ID parentId
  name: '', // 名称
  notes: '', // 备注
  thumb: '', // 缩图
  keywords: '', // 关键字
  idx: 1 // 排序
}
// 表单数据
const formState = reactive({})

// 表单 处理
const { onCancel, onFinish, InitializeData } = useFormEvent({state: state, remoteApi: categoryApi, formState: formState, original: original, formRef: formRef})

// 向父组件暴露方法和属性
defineExpose({ InitializeData })
// 加载页时初始化选项等基础数据
onMounted(() => {
  categoryApi.getTreeOptions().then(res => {
    state.parentOptions.push(res.data)
  })
})
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`分类管理`"
    placement="right"
    :width="'60%'"
  >
    <a-card draggable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          :validate-on-rule-change="false"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="所属分类" name="parentId" :label-col="{span:3}"
                :rules="[{ required: true, message: '请选择所属分类' }]">
                <a-tree-select
                  v-model:value="formState.parentId"
                  placeholder="上级分类" show-search allow-clear
                  tree-default-expand-all
                  tree-node-label-prop="label"
                  :tree-data="state.parentOptions" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="分类名称" name="name" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入分类名称!' }]">
                <a-input
                  v-model:value="formState.name" placeholder="分类名称" show-count :minlength="2" :maxlength="20"
                  allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="关键字" name="keywords" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入关键字使用, 逗号分开!' }]">
                <a-input v-model:value="formState.keywords" placeholder="关键字使用, 逗号分开" allow-clear show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="图片" name="thumb" :label-col="{span:3}">
                <a-upload
                  v-model:file-list="formState.thumb"
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  :before-upload="beforeUpload"
                  @change="handleChange"
                >
                  <img v-if="formState.thumb" :src="formState.thumb" alt="avatar" class="ant-upload">
                  <div v-else>
                    <loading-outlined v-if="loading" />
                    <plus-outlined v-else />
                    <div class="ant-upload-text">上传</div>
                  </div>
                </a-upload>
                <a-alert message="Warning Text" type="warning" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="排序" name="idx" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入排序!' }]">
                <a-input-number v-model:value="formState.idx" placeholder="排序" :min="0" :max="10" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="备注" name="notes" :label-col="{span:3}">
                <a-textarea v-model:value="formState.notes" placeholder="备注" allow-clear show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                  <a-input v-model:value="formState.id" type="hidden" />
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
  </a-drawer>
</template>
<style scoped>
/deep/ .ant-upload img {width: 100%;}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>